<template>
	<view class="fui-wrap">
		<view>
			<live-player
			  :src="liveSource"
			  autoplay
			  @statechange="statechange"
			  @error="error"
			  style="width: 300px; height: 225px;"
			/>

			
		</view>

		<view class="fui-page__bd">
			 <fui-tabs :tabs="tabsList" @change="change"  isDot scroll alignLeft/>
		</view>
		<view v-if="tableIndex==0">
	 <ua-timeline v-for="(item,index) in courseList" :key="index">
		 
	     <ua-timeline-item :timestamp="dateFormatter(2,item.courseStartTime)">
			 <view class="row" style="display: ruby;" >				 
			 		<view  class="shadow-div" >
			 		<view style="display: grid;">
			 		<fui-avatar size="large" :src="this.$request.baseUrl+item.masterFootballIcon" radius="30"/>
			 		{{item.masterFootballName}}
			 		{{item.courseMasterTeamNum }}
			 		</view>
			 		 <view>
			 		 <view><div>VS</div> <div>{{item.coruseStatus }}</div></view>
			 		</view>
			 		<view style="display: grid;">
			 			{{item.courseAwayTeamNum }}
			 		<fui-avatar size="large" :src="this.$request.baseUrl+item.awayFootballIcon" radius="30"/>
			 		{{item.awayFootballName}}
			 		</view>					
			 	</view>		
			 </view>
		 </ua-timeline-item>
	     
	     </ua-timeline>
		 
		</view>
		<view v-if="tableIndex==1||tableIndex==2">
			<view  v-for="(item,index) in newVideos" :key="index">
										
			<fui-row margin-bottom="24rpx">
				<fui-col :span="12">
					<view v-if="index%2==0" class="video-container" >
					<view class="video-title">{{newVideos[index].videoName}}</view>
					<video 
					:id="'videId'+ newVideos[index].id"
					:src="this.$request.baseUrl+newVideos[index].videoPath"
					:poster='this.$request.baseUrl+newVideos[index].videoConverPath'
					 @play="playVedio('videId'+ newVideos[index].id)"
					 enable-danmu danmu-btn controls />
					</view>
				</fui-col>
				<fui-col :span="12">
			<view v-if="index%2==0"  class="video-container">
			<view class="video-title">{{newVideos[index+1].videoName}}</view>
			<video 
			:id="'videId'+ newVideos[index+1].id"
			:src="this.$request.baseUrl+newVideos[index+1].videoPath"
			:poster='this.$request.baseUrl+newVideos[index+1].videoConverPath'
			 @play="playVedio('videId'+ newVideos[index+1].id)"
			enable-danmu danmu-btn controls/>
			</view>
				</fui-col>
			</fui-row>
			 </view>
			
		</view>
	 <view v-if="tableIndex==3">
	 	<view v-for="(item,index) in footballList" :key="index">
			<view >
				<image  :src="this.$request.baseUrl+item.footballIcon"/>
				{{item.footballName}}
			</view>
		</view>
	 </view>
	</view>
</template>

<script>
import utils from '@/components/firstui/fui-utils';
	export default {
		data() {
			return {
				liveSource:'',
				footballList:[],
				newVideos:[],
				contestId:'',
				courseId:'',
				tabsList:[
				'赛程',
				 '整场回放',
				  '精彩集锦',
				  '球队' ],
				  tableIndex:0,
				courseList:[],
				queryForm:{
					 query:'',
					  pageNum:1,
					  pageSize:100,
					  param:{
						  contestId:'',
						  courseId:'',
						  videoType:''
					  }
				}
			}
		},
		onLoad(e) {
			this.queryForm.query=e.contestId;
			this.queryForm.param.contestId=e.contestId;
			this.liveSource=e.liveSource;
		 
			this.getCourse()
		},
		methods: {
			 statechange(e){
			            console.log('live-player code:', e.detail.code)
			        },
			        error(e){
						console.log(e)
			            console.error('live-player error:', e.detail.errMsg)
			        },
			dateFormatter(type,data) {
				// y-m-d h:i:s
				const format = ['y-m-d h:i', 'y/m/d', 'm-d', 'h:i', 'i:s', 'y年m月d日 h时i分s秒'][type - 1]
				const val = utils.dateFormatter(data, format);
				return val;
			},
			change(e){
				this.tableIndex=e.index
				if(this.tableIndex==1||this.tableIndex==2){
					this.getVideo(this.tableIndex)
				}else if(this.tableIndex==3){
					this.getFootBall();
				}
			},
			getCourse(){
				this.$request.post('course/list', this.queryForm).then(res => {
				  if(res.code ==200){
					  this.courseList=res.data.dataList;
					   
				  }
				})
			},
			getVideo(index){
				if(index==2){
					this.queryForm.param.videoType=2
				}
				this.$request.post('video/list',this.queryForm).then(res => {
				 	  if(res.code==200){
						this.newVideos=  res.data.dataList
						this.queryForm.param.videoType='';
					  }
				 }) 
			},
			getFootBall(){
				  this.$request.get("course/getFootballList/"+this.queryForm.param.contestId).then(res=>{
				                    if(res.code==200){
				                      this.footballList =res.data
				                    }else{
				                 this.footballList = []
				           }
				  })
			}
		}
	}
</script>

<style>
	.shadow-div {
	  background-color: #fff;
	  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  border-radius: 16px; /* 圆角 */
	  display:flex; 
	  justify-content: space-around;
	      width: 56%;
	      height: 81%;
	}
</style>
